<template>
    <div class="module-bord">
        <div class="module-bord-position positionFixedCenter">
            <div class="module-bord-content positionRCT" :class="{top2:moduleBord.isNeedCloseBtn}">
                <slot></slot>
                <img v-if="moduleBord.isNeedCloseBtn" class="rpfr-close-btn" @click="$emit('closeModule')" :src="staticImageUrl('images/close_white_bord.png')" alt="">
            </div>
        </div>
        <v-bord v-if="bordShow" >
            <div slot="cantClick" @click="$emit('closeModule')" class="com_black"></div>
        </v-bord>
    </div>
</template>

<script>
    export default {
        name: "ModuleBord",
        props:{
            moduleBordProp:Object
        },
        data(){
            return{
                moduleBord:{
                    isNeedCloseBtn:true,
                },
                bordShow:true,
            }
        },
        mounted(){
            this.moduleBord = Object.assign({},this.moduleBord,this.moduleBordProp);
        },
        methods:{
            bordShowFn(boolean){
                this.bordShow = boolean;
            }
        },
        components:{
            'v-bord':()=>import('../../../components/commonComponents/alert/Bord')
        },
        watch:{
            moduleBordProp(val){
                this.moduleBord = Object.assign({},this.moduleBord,val);
            }
        }
    }
</script>

<style scoped>
    .module-bord-position{
        width: 0;
        height: 0;
        z-index: 1060;
    }
    .module-bord-content{
        width: 3.5rem;
        background-color: #fff;
        -webkit-border-radius: .1rem;
        -moz-border-radius: .1rem;
        border-radius: .1rem;
        padding: .45rem .15rem .6rem;
    }
    .rpfr-close-btn{
        position: absolute;
        bottom: -.6rem;
        width: .44rem;
        height: .44rem;
        z-index: 1060;
        left: 0;
        right: 0;
        margin: auto;
    }
    .top2{
        position: relative;
        top: -.3rem;
    }
</style>